<template>
  <div class="warpper">
    <van-swipe @change="onChange">
      <van-swipe-item v-for="(item, index) in imageList" :key="index">
        <van-image fit="scale-down" :src="imgUrls + item" width="100%" />
      </van-swipe-item>
    </van-swipe>

    <!-- 详情图end -->
    <van-row>
      <van-col span="24" class="detail">
        <p style="font-size: 20px; color: red">《{{ bookDetail.bookName }}》</p>
        <p style="font-size: 16px; color: gray">{{ bookDetail.introduction }}</p>
        <p>作者：{{ bookDetail.author }}</p>
        <p>书籍价格：￥{{ bookDetail.price?.toFixed(2) }}</p>
        <p>ISBN码：{{ bookDetail.isbn }}</p>
        <p>出版社：{{ bookDetail.publish }}</p>
        <p>出版日期：{{ bookDetail.pubDate }}</p>
        <div style="float: right; text-align: center; margin-right: 5px; color: #909399">
          <span>浏览: </span>{{ bookDetail.viewNumber }}
        </div>
        <div><span>库存量: </span>{{ bookDetail.count }}</div>
      </van-col>
    </van-row>
    <!-- 商品信息end -->
    <van-goods-action>
      <van-goods-action-icon
        v-if="bookDetail.isCollect === '1'"
        icon="star"
        text="已收藏"
        color="#ff5000"
        @click="collect"
      />
      <van-goods-action-icon v-else icon="star-o" text="收藏" @click="collect" />
      <van-goods-action-button v-if="bookDetail.isLend === '0'" type="danger" text="立即借阅" @click="onLend" />
      <van-goods-action-button v-else type="danger" disabled text="该书已经借阅" />
    </van-goods-action>
    <van-calendar v-model="show" title="借阅截至时间" @confirm="onConfirm" />
  </div>
</template>

<script>
import { parseTime } from '../../utils/index.js'
import { getBook } from '@/api/product.js'
import { collect, delCollect } from '@/api/collect.js'
import { createOrder } from '@/api/order.js'

export default {
  data() {
    return {
      current: 0,
      limit: 0, // 条数
      isLend: '1',
      bookDetail: {}, // 书籍信息
      imageList: [],
      chosenCoupon: -1,
      show: false,
      imgUrls: this.$baseApi
    }
  },
  created() {
    this.getData()
  },
  filters: {
    chageUrl: (data, url) => {
      if (data) {
        var a = data
        var b = /<img [^>]*src=['"]([^'"]+)[^>]*>/g
        var s = a.match(b)
      }
      if (s != null) {
        for (var i = 0; i < s.length; i++) {
          var srcImg = s[i].replace(b, '$1').replace(/\s+/g, '')
          a = a.replace(new RegExp(srcImg, 'g'), url + srcImg)
        }
      }
      return a
    }
  },
  methods: {
    getData() {
      const id = Number(this.$route.query.id)
      getBook(id).then(res => {
        if (res.code === 200) {
          this.bookDetail = res.data
          this.imageList = res.data.bookImages.split(',')
        }
      })
      this.$route.meta.title = '书籍详情'
    },
    onChange(index) {
      this.current = index
    },
    collect() {
      if (this.bookDetail.isCollect === '1') {
        // 取消收藏
        delCollect(this.$route.query.id).then(res => {
          if (res.code === 200) {
            this.bookDetail.isCollect = '0'
          }
        })
        this.getData()
      } else {
        // 收藏
        collect({
          bookId: this.$route.query.id,
          bookName: this.bookDetail.bookName
        }).then(res => {
          if (res.code === 200) {
            this.$toast.success('收藏成功')
            this.bookDetail.isCollect = '1'
            setTimeout(() => {
              this.getData()
            }, 300)
          }
        })
      }
    },
    onLend() {
      this.show = true
    },
    onConfirm(deadLine) {
      const exipre = this.formatDate(deadLine)
      this.show = false

      createOrder({
        bookId: this.bookDetail.id,
        bookName: this.bookDetail.bookName,
        deadline: exipre
      }).then(res => {
        if (res.code === 200) {
          this.getData()
          setTimeout(() => {
            this.$toast.success('借阅成功')
          }, 300)
        }
      })
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    parseTime
  }
}
</script>

<style scoped>
.disc {
  width: calc(100% - 30px);
  margin: 0 auto;
}

.disc /deep/ img {
  width: 100%;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
  color: #ffffff;
}

.warpper {
  background-color: #f8f8f8;
  padding: 8px;
}

.img {
  width: 60px;
  height: 60px;
  margin: 10px;
}

.detail {
  margin-top: 10px;
  background-color: #ffffff;
  padding: 6px;
  border-radius: 8px;
}

.custom-title {
  margin: 8px;
}
</style>
